<template>
    <!--顶部通栏-->
    <nav>
        <app-topnav></app-topnav>
    </nav>

    <!--头部内容-->
    <header>
        <app-header></app-header>
    </header>
    <!--吸顶头部组件-->
    <app-header-sticky></app-header-sticky>

    <!--内容容器-->
    <div class="app-body">
        <!--二级路由-->
        <RouterView></RouterView>
    </div>

    <!--底部内容-->
    <footer>
        <app-footer></app-footer>
    </footer>
</template>

<script>
import AppTopnav from "@/components/app-topnav";
import AppHeader from "@/components/app-header";
import AppFooter from "@/components/app-footer";
import { useStore } from "vuex";
import AppHeaderSticky from "@/components/app-header-sticky";

export default {
    name: "Layout",
    components: {
        AppHeaderSticky,
        AppFooter,
        AppHeader,
        AppTopnav
    },
    setup(){
        const store = useStore();
        // 调用 dispatch，在actions中查询出商品分类。使用state获取到数据。
        store.dispatch("category/getList");
    }
};
</script>

<style lang="less" scoped>
.app-body {
    min-height: 600px;
}
</style>
